<template>
  <!--<el-container> 作为模板的最外层元素，具有响应式布局-->
  <el-container>
    <el-menu
      :default-active="activeIndex"
      :ellipsis="false"
      mode="horizontal"
      text-color="#606266"
      active-text-color="#67C23A"
      class="menu"
    >
      <el-menu-item index="1" style="font-size: 26px; color: #67c23a">
        <router-link to="/">Real World</router-link>
      </el-menu-item>
      <div class="flex-grow" />
      <!--一个空的 <div> 元素，用于占据额外的空间，让其他菜单项靠右显示 -->
      <el-menu-item index="2">
        <i class="el-icon-edit"></i>
        <a href="/article/create">新建文章</a>
      </el-menu-item>
      <el-menu-item index="3">
        <a href="/register">注册</a>
      </el-menu-item>
    </el-menu>
    <el-header>
    <div align="center">
    <h1>Real World博客</h1> 
    <h3>大开你的眼界</h3>
    </div>
    </el-header>
  </el-container>
</template>

<script setup>
//从 Vue3 导入 Vue3组合API ref 函数，用于创建响应式引用
import { ref } from "vue";

//创建一个名为 activeIndex 的响应式引用，初始值为 '3。这表示默认激活的菜单项是"注册"
const activeIndex = ref("3");
</script>

<style scoped>
/* scoped限制css样式仅限于本组件,以免造成冲突 */

/* 设置el-header样式 */
.el-header {
  background-color: #67c23a; /* 设置背景颜色 */
  color: white; /* 设置文字颜色 */
  height: 100px; /* 设置一个明确的高度，可以根据需要调整 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  font-size: 20px; /* 设置字体大小 */
}

.flex-grow {
  flex-grow: 1; /*  让元素占据剩余空间 */
}
.menu {
  width: 100%; /* 使菜单占据整个屏幕宽度 */
}
.el-menu-item a {
  color: #fff; /* 设置 a 标签的文字颜色为白色 */
  text-decoration: none; /* 移除 a 标签的下划线 */
}
</style>

